Hace unos años cuando se hablaba de transiciones uno se imaginaba que en un futuro podríamos crear efectos fantásticos utilizando solamente CSS y así ha sido.

 Vagabundia definía muy bien lo que es una transición diciendo "Una transición es aquello que ocurre entre un momento y otro" recomiendo a quien esté interesado visitar su blog para comprender y aprender a utilizar las transiciones.

El abanico de efectos es muy amplio, hace unos meses aquí hablamos sobre "Transición entre colores con animación" o "Transición con CSS3 en una imagen"

Este otro efecto de hoy lo he visto en Codrops es el que más me ha gustado de los que ofrece en esta demo

Para conseguir este efecto nos situamos en plantilla en edición de HTML y justo antes de ]]></b:skin> añadimos el CSS

.ch-item {
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: default;
    height: 100%;
    position: relative;
    width: 100%;
}
.ch-info-wrap {
    background: transparent url(URL) repeat scroll 0 0 ;
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 3px rgba(115, 114, 23, 0.8) inset;
    height: 180px;
    left: 20px;
    perspective: 800px;
    position: absolute;
    top: 20px;
    transition: all 0.4s ease-in-out 0s;
    width: 180px;
}
.ch-info {
    border-radius: 50% 50% 50% 50%;
    height: 180px;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 0.4s ease-in-out 0s;
    width: 180px;
}
.ch-info > div {
    backface-visibility: hidden;
    background-position: center center;
    border-radius: 50% 50% 50% 50%;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}
.ch-info .ch-info-back {
    background: none repeat scroll 0 0 #000000;
    transform: rotate3d(0, 1, 0, 180deg);
}
.ch-img-1 {
    background-image: url("url-imagen-220x220");
}
.ch-info h3 {
    color: #FFFFFF;
    font-family: 'Open Sans',Arial,sans-serif;
    font-size: 14px;
    height: 50px;
    letter-spacing: 2px;
    margin: 0 15px;
    padding: 40px 0 0;
    text-shadow: 0 0 1px #FFFFFF, 0 1px 2px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}
.ch-info p {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 12px;
    font-style: italic;
    margin: 0 30px;
    padding: 10px 5px;
}
.ch-info p a {
    color: rgba(255, 255, 255, 0.7);
    display: block;
    font-family: 'Open Sans',Arial,sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
    padding-top: 4px;
    text-transform: uppercase;
}
.ch-info p a:hover {
    color: rgba(255, 242, 34, 0.8);
}
.ch-item:hover .ch-info-wrap {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 3px rgba(115, 114, 23, 0.8) inset;
}
.ch-item:hover .ch-info {
    transform: rotate3d(0, 1, 0, -180deg);
}
.ch-grid {
    display: block;
    list-style: none outside none;
    margin: 20px 0 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
.ch-grid:after, .ch-item:before {
    content: "";
    display: table;
}
.ch-grid:after {
    clear: both;
}
.ch-grid li {
    display: inline-block;
    height: 220px;
    margin: 20px;
    width: 220px;
}

Donde dice url-imagen-220x220 es el lugar para pegar nuestra imagen.

.ch-img-1 { 
 background-image: url("url-imagen-220x220"); 


 Guardamos los cambios y el HTML lo añadimos donde deseamos mostrar el efecto.

<ul class='ch-grid'>
   <li>
    <div class='ch-item ch-img-1'>               
        <div class='ch-info-wrap'>
            <div class='ch-info'>
                <div class='ch-info-front ch-img-1'></div>
                <div class='ch-info-back'>
                    <h3>AQUÍ-TÍTULO</h3>
                    <p>TEXTO O SUBTÍTULO<a href='AQUÍ-URL-ENLACE'>AQUÍ-TEXTO-ENLACE</a></p>
                </div>   
            </div>
        </div>
    </div>
</li>
</ul>

En el HTML es el lugar donde añadiremos el título, subtitulo y enlace.
Unknown

Preciosos Julia, he mirado largo rato, besos :)

Gem@

Hola Graciela que alegría verte después de tanto tiempo y eso que estamos separadas por esta ventanita nada más :)
Me alegra que te guste el post ;)

Responder
Unknown

Gema, espero que no te moleste que te venga con una consulta diferente a esta entrada :(
Me han dicho que eres una crack con el tema blogger y aquí estoy, jeje. Antes de nada, muchas gracias.

Verás, me he abierto un blog pero no puedo subir nada por el tema de las fotos. A ver, cuando estoy escribiendo una entrada en el modo "Redactar", e intento subir una imagen, no puedo cambiarlas de tamaño. El problema es que cuando selecciono la imagen desde el ordenador desde "Examinar", cuando pincho en la imagen para cambiar el tamaño, la barra que sale que dice "Pequeño - Mediano - Grande - Extra Grande - Tamaño Original - Alinear a la Izquierda - Añadir Leyenda, etc" se me va subiendo para arriba conforme voy añadiendo más imágenes y llega un momento en el que la barra no se ve.

A ver, yo pongo dos fotos, pues la barra me sale justo debajo cuando clickeo la imagen, en la tercera ya se va subiendo para arriba, y si subo cuatro o cinco, en las últimas ni puedo agrandar o empequeñecer ni añadir una leyenda a la imagen ni nada porque la barra no me sale. ¿Qué es esto?, ¿qué puedo hacer?.

Muchísimas gracias Gema, he estado viendo lo amable que eres con las personas que te preguntan, y es que, eres un encanto :D

Gracias

Gem@

Hola Laura, lo primero bienvenida y luego decirte que si te mandaron en busca de un crack en esto de Blogger seguramente se confundieron de sitio :) pero vamos a intentar solucionar eso que comentas.

El editor de Blogger no es algo perfecto como no lo es nada en Blogger, nos hace su papel eso nadie lo duda pero tiene sus errores o al menos yo los llamo así.

Si al subir las fotos te dice "Examinar" es porque estás subiéndolas con la pestaña de "HTML" marcada, intenta subirlas estando la pestaña en "Redactar" ahí te dirá "Subir archivos"
Si haciéndolo de este modo sigues teniendo el problema entonces no queda otra que ordenar las fotos y su tamaño pasando a la pestaña "HTML" de esa forma limpiando el código sobrante que Blogger añade y añade y modificando el html puedes tener las imágenes ubicadas a tu gusto y en el tamaño deseado. Pero antes prueba a subirlas en "Redactar" :)

Unknown

¡Gracias Gema!
:)

Responder
María Pilar

Hola Julia, esto de las transiciones y el efecto hover es lo más llamativo en los blogs y te atrae como un imán. Muy bonito.

Un cariñoso abrazo :)

Gem@

Es verdad que estas cosas resultan muy atrayentes y tentadoras.
Otro abrazo para ti m.p.moreno :)

Responder
Talismán Dreams

No sé si aquí el efecto es diferente o es que yo no lo encuentro en la demo... pero aquí no se aprecia la transición.
Voy a probarlo en mi blog, que me encantan estas cositas para presentar las portadas de los últimos libros que reseño.

¡Muchas gracias!

Gem@

Es el ejemplo nº 4, quizás no lo encuentras porque yo añadí mi propia imagen :D

Responder
Talismán Dreams

Una preguntita: ¿la imagen se adapta o hay que subirla con ese tamaño?

Gem@

Es conveniente añadir las imágenes con la medida indicada y muy aconsejable porque aunque el tamaño se adapte la carga sigue siendo el de la imagen que añadimos.

Talismán Dreams

Ok, genial. Voy a probarlo ¡gracias!

Gem@

Te respondí a la pregunta de si es posible añadir una segunda imagen y si para otro efecto el procedimiento es el mismo pero se coló un emoticón en el código y al suprimir el comentario también se suprime el tuyo, lo siento.

Esta era la respuesta anterior:

La imagen va en el CSS, para añadir varias imágenes sería cuestión de añadirlas de esta forma.
Busca donde dice:

.ch-img-1 {
background-image: url("url-imagen-220x220");
}

y a continuación añades

.ch-img-2 {
background-image: url("url-imagen-220x220");
}

Si te das cuenta es lo mismo pero el número que identifica la imagen será el 2 y así sucesivamente cambiando el número para añadir tantas imágenes como deseas.
Luego en el HTML añadimos la parte para la segunda imagen, en negrita está lo que se debe añadir.

<ul class='ch-grid'>
<li>
<div class='ch-item ch-img-1'>
<div class='ch-info-wrap'>
<div class='ch-info'>
<div class='ch-info-front ch-img-1'></div>
<div class='ch-info-back'>
<h3>AQUÍ-TÍTULO</h3>
<p>TEXTO O SUBTÍTULO<a href='AQUÍ-URL-ENLACE'>AQUÍ-TEXTO-ENLACE</a></p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class='ch-item ch-img-2'>
<div class='ch-info-wrap'>
<div class='ch-info'>
<div class='ch-info-front ch-img-2'></div>
<div class='ch-info-back'>
<h3>AQUÍ-TÍTULO</h3>
<p>TEXTO O SUBTÍTULO<a href='AQUÍ-URL-ENLACE'>AQUÍ-TEXTO-ENLACE</a></p>
</div>
</div>
</div>
</div>
</li>

</ul>

Cada efecto de la demo es un código distinto.

Responder
Talismán Dreams

¡¡Mil gracias Gema!! Lo entendí perfecto :)

¡Un besote!

Gem@

Otro para ti :D

Responder
Unknown

se puede integrar un titulo automatico en el boton?

Gem@

Hola Osman ¿a qué te refieres con un título automático?

Responder
Berta Fernández-Viña Fernández

Hola:Esto es genial y estupenda tu explicación.
Serías tan amable de decirme como consigo los códigos de las otras demo?
Es que tengo un fondo negro y la foto que quiero poner es en blanco y negro...Además quiero que se vea la foto.
En espera de tu respuesta, recibe un cordial saludo

Responder
Berta Fernández-Viña Fernández

Hola de nuevo: Ya encontré y descargué los códigos de las Demo. Lo puse en mi blog de pruebas y quedó estupendo.Pero intento ponerlo en mi blog y...es curioso lo pongo en un gadget y no sale nada.¿A que puede ser debido? Gracias

Responder
Berta Fernández-Viña Fernández

Hola Me encanta la demo Nº7,la última vaya.
He descargado el CSS y lo añadí, también descargué el HTML y lo añadí tal cual al gadget donde quiero ponerlo y no me sale nada.¿Que estoy haciendo mal?¿Qué debo modificar en el HTML?Serías tan amable de decirme como se pone la demo siete?En espera de tu explicación recibe un cordial saludo

Gem@

Dónde puedo verlo funcionando y dónde está aplicado y no funciona? he mirado en los dos blogs de tu perfil pero no localizo esos ejemplos .(

Responder
Berta Fernández-Viña Fernández

Gracias,ya he pueston tu ejemplo y me quedó muy guapo

Gem@

Me alegra que así sea :)
Siento la demora en responderte y llegar tarde :(

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top